<template>
    <div class="shop-car-bar">
        <div class="left" @click="toShopCar">
            <span class="iconfont icongouwucheman"></span>
            <div class="count">{{getCount}}</div>
        </div>
        <div class="content">
            总共有:<span>{{getMoney}}</span> 元
        </div>
        <div class="right" @click="createOrder">
            去结算
        </div>
    </div>
</template>
<script>
    import {
        mapGetters,mapState,mapActions
    } from "vuex";

    export default {
        name: "ShopCarBar",
        computed: {
            ...mapGetters(["getCount", "getMoney"]),
            ...mapState(["userInfo","shopCarList"])
        },
        methods: {
            ...mapActions(["cleanShopCar"]),
            toShopCar() {
                if(this.$route.name != "ShopCar"){
                    this.$router.push({
                        name: "ShopCar"
                    });
                }
            },
            async createOrder(){
                if(this.userInfo){
                    let obj = {
                        uid:this.userInfo.sno,
                        cartItem:[]
                    }
                    if(this.shopCarList.length > 0){
                        obj.cartItem = this.shopCarList.map(item=>{
                            return {
                                fid:item.fid,
                                count:item.count
                            }
                        });
                        // 将数据进行http编码
                        let encodestr = encodeURIComponent(JSON.stringify(obj));
                        let loading = this.$msg.loading("订单生成中");
                        try {
                            let result = await this.$api.order.createOrder(encodestr);
                            this.$msg.info(result.msg);
                            this.cleanShopCar();
                            this.$router.push({
                                name:"Order",
                                query:{
                                    action:"refresh"
                                }
                            });
                        } catch (error) {
                            console.log(error);
                        } finally {
                            loading.close();
                        }

                    } else {
                        this.$msg.info("小主没有选择东西呢！");
                    }
                } else {
                    this.$msg.info("你还没有登录，请先去登录");
                    this.$router.push({
                        name:"Login"
                    });
                }
                
            }
        }
    }
</script>
<style lang="scss" scoped>
    .shop-car-bar {
        position: fixed;
        height: 50px;
        background-color: #404042;
        @include flexbox(row);
        width: 100%;
        bottom: 0;

        .left {
            width: 90px;
            position: relative;
            @include flexbox(row, center, center);

            span {
                display: inline-block;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background-color: #008DE1;
                color: white;
                font-size: 32px;
                box-sizing: border-box;
                @include flexbox(row, center, center);
                position: absolute;
                border: 5px solid #404042;
                top: -30%;
            }

            .count {
                position: absolute;
                z-index: 10;
                top: -20px;
                right: 15px;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                background-color: red;
                color: white;
                @include flexbox(row, center, center);
                font-size: 12px;

            }
        }

        .content {
            flex: 1;
            color: white;
            font-size: 16px;
            @include flexbox(row, center, center);

            span {
                font-size: 18px;
                font-weight: bold;
                margin: 0px 5px;
            }
        }

        .right {
            width: 85px;
            color: #A6A7AA;
            font-size: 14px;
            @include flexbox(row, center, center);
            background-color: #535355;
        }
    }
</style>